---
title: Installation
description: In wenigen Schritten mit RainbowKit loslegen
---

# Installation

## In wenigen Schritten mit RainbowKit loslegen

### Schnellstart

Sie können eine neue RainbowKit + [wagmi](https://wagmi.sh) + [Next.js](https://nextjs.org) App mit einem der folgenden Befehle und einem Paketmanager Ihrer Wahl einrichten:

```bash
npm init @rainbow-me/rainbowkit@latest
# or
pnpm create @rainbow-me/rainbowkit@latest
# or
yarn create @rainbow-me/rainbowkit
```

Dies wird Sie nach einem Projektnamen fragen, ein neues Verzeichnis mit einem Boilerplate-Projekt erstellen und alle erforderlichen Abhängigkeiten installieren.

Alternativ können Sie RainbowKit manuell in Ihr bestehendes Projekt integrieren.

### Manuelles Setup

Installieren Sie RainbowKit und seine Peer-Abhängigkeiten, [wagmi](https://wagmi.sh/), [viem](https://viem.sh), und [@tanstack/react-query](https://tanstack.com/query/v5).

```bash
npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query
```

> Hinweis: RainbowKit ist eine [React](https://reactjs.org/) Bibliothek.

#### Importieren

Importieren Sie RainbowKit, Wagmi und TanStack Query.

```tsx
import '@rainbow-me/rainbowkit/styles.css';

import {
  getDefaultConfig,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { WagmiProvider } from 'wagmi';
import {
  mainnet,
  polygon,
  optimism,
  arbitrum,
  base,
} from 'wagmi/chains';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";
```

#### Konfigurieren

Konfigurieren Sie Ihre gewünschten Chains und generieren Sie die erforderlichen Konnektoren. Sie müssen auch eine `wagmi` Konfiguration einrichten. Falls Ihr dApp Server Side Rendering (SSR) verwendet, stellen Sie sicher, dass `ssr` auf `true` eingestellt ist.

> Hinweis: Jedes dApp, das sich auf WalletConnect verlässt, muss nun eine `projectId` von [WalletConnect Cloud](https://cloud.walletconnect.com/) erhalten. Dies ist absolut kostenlos und dauert nur wenige Minuten.

```tsx line=4-99
...
import { getDefaultConfig } from '@rainbow-me/rainbowkit';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, polygon, optimism, arbitrum, base],
  ssr: true, // If your dApp uses server side rendering (SSR)
});
```

#### Provider umwickeln

Wickeln Sie Ihre Anwendung mit `RainbowKitProvider`, [`WagmiProvider`](https://wagmi.sh/react/api/WagmiProvider#wagmiprovider), und [`QueryClientProvider`](https://tanstack.com/query/v4/docs/framework/react/reference/QueryClientProvider) ein.

```tsx
const queryClient = new QueryClient();

const App = () => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          {/* Your App */}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};
```

#### Den Connect-Button hinzufügen

Importieren und rendern Sie dann in Ihrer App die `ConnectButton` Komponente.

```tsx
import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};
```

RainbowKit übernimmt nun die Wallet-Auswahl Ihrer Benutzer, zeigt Wallet-/Transaktionsinformationen an und verwaltet Netzwerk-/Wallet-Wechsel.

#### Zusätzliche Build-Tooling-Einrichtung

Einige Build-Tools benötigen zusätzliche Einrichtung.

##### Remix

Wenn Sie [Remix](https://remix.run) verwenden, müssen Sie die Module `buffer`, `events` und `http` polyfillen. Verwenden Sie die Remix-Konfiguration unten oder [unser Beispiel-Remix-Projekt](https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-remix).

```ts
/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ignoredRouteFiles: ["**/.*"],
  browserNodeBuiltinsPolyfill: {
    modules: { buffer: true, events: true, http: true },
  },
};
```

### Bereit zur Bereitstellung

Standardmäßig verwendet Ihre dApp öffentliche RPC-Provider für jede Kette, um Salden abzurufen, ENS-Namen aufzulösen, und mehr. Dies kann oft Zuverlässigkeitsprobleme für Ihre Benutzer verursachen, da öffentliche Knoten rate-limitiert sind. Stattdessen sollten Sie den Zugriff auf einen RPC-Provider über Dienste wie [Alchemy](https://www.alchemy.com/) oder [QuickNode](https://www.quicknode.com/) erwerben und Ihre eigenen Transports in Wagmi definieren. Dies kann durch Hinzufügen des `transports`-Parameter in `getDefaultConfig` oder direkt über Wagmis `createConfig` erreicht werden.

Ein Transport ist die Netzwerkschicht, die das Senden von JSON-RPC-Anfragen an den Ethereum Node Provider (wie Alchemy, Infura, etc.) abwickelt.

**Beispiel mit einem `http` Transport**

```tsx
import { getDefaultConfig } from '@rainbow-me/rainbowkit';
import { http } from 'wagmi';
import { mainnet, sepolia } from 'wagmi/chains';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/...'),
    [sepolia.id]: http('https://eth-sepolia.g.alchemy.com/v2/...'),
  },
});
```

Für mehr Details, sehen Sie sich die [wagmi Transport-Dokumentation](https://wagmi.sh/core/api/transports#transports) an.

### Fügen Sie Ihre eigene Funktionalität hinzu

Da Ihre Benutzer jetzt ihre Wallets verbinden können, können Sie den Rest Ihrer App mit [wagmi.](https://wagmi.sh) weiterentwickeln.

Senden Sie Transaktionen, interagieren Sie mit Verträgen, lösen Sie ENS-Details auf und vieles mehr mit wagmis umfassendem Angebot an React Hooks.

Für weitere Details, sehen Sie sich die [wagmi-Dokumentation.](https://wagmi.sh) an.

### Weitere Beispiele

Um einige laufende Beispiele von RainbowKit zu sehen oder um diese zu nutzen, um automatisch ein neues Projekt zu scaffolding, schauen Sie sich die [offiziellen Beispiele](https://github.com/rainbow-me/rainbowkit/tree/main/examples) an.

Um RainbowKit direkt in Ihrem Browser auszuprobieren, besuchen Sie die untenstehenden CodeSandbox-Links:

- mit [Create React App](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-create-react-app)
- mit [Next.js](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-next)
- mit [Next.js App Router](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-next-app)
- mit [Remix](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-remix)
- mit [Vite](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-vite)
- mit [React Router](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-react-router)
